<script lang="ts" setup>
import { onMounted, computed } from "vue";
import { isString, isNumber, isArray } from "@/utils/is";
import { extractNumberAndUnit } from "@/utils/split";

enum StrokeLinecaps {
  round = "round",
  square = "square",
}

const props = defineProps({
  // 进度条的百分比
  percent: {
    type: Number,
    default: 0,
  },
  // 进度条底色
  bgColor: {
    type: String,
    default: "#F5F5F5",
  },
  // 进度条的颜色
  color: {
    type: [String, Array],
    default: "#00eaff",
  },
  // 进度条类型（round 圆角 square 直角）
  strokeLineType: {
    type: String,
    default: StrokeLinecaps.round,
  },
  // 进度条宽度
  strokeWidth: {
    type: [String, Number],
    default: 10,
  },
});

const getWapperStyle = computed(() => {
  return {};
});

const getBgStyle = computed(() => {
  const { color, strokeWidth } = props;
  let height = "8px";
  let borderRadius = "4px";
	let backgroundColor = "";
  if (isString(strokeWidth)) {
    let s = strokeWidth + "";
    let res = extractNumberAndUnit(s);
    if (res !== null) {
      let { number, unit } = res;
      height = `${number}${unit}`;
      borderRadius = `${number / 2}${unit}`;
    }
  } else if (isNumber(strokeWidth)) {
    let n = Number(strokeWidth);
    height = `${n}px`;
    borderRadius = `${n / 2}px`;
  }
	if(isArray(color) && color.length > 0) {
		let colorStr= "";
		color.forEach((item, index) => {
			colorStr += `${item} ${index * 100 / color.length}%,`
		})
		// backgroundColor = "linear-gradient(to right, #00eaff, #00eaff)"
		backgroundColor = "linear-gradient(to right, #00eaff, #00eaff)"
	}
	
  return {
    height,
    borderRadius,
    backgrondColor: bgColor,
  };
});

const getFillStyle = computed(() => {
  const { bgColor, strokeWidth } = props;
  let height = "8px";
  let borderRadius = "4px";
  if (isString(strokeWidth)) {
    let s = strokeWidth + "";
    let res = extractNumberAndUnit(s);
    if (res !== null) {
      let { number, unit } = res;
      height = `${number}${unit}`;
      borderRadius = `${number / 2}${unit}`;
    }
  } else if (isNumber(strokeWidth)) {
    let n = Number(strokeWidth);
    height = `${n}px`;
    borderRadius = `${n / 2}px`;
  }
  return {
    height,
    borderRadius,
    backgrondColor: bgColor,
  };
});

onMounted(() => {});
</script>

<template>
  <div class="progress-wrapper">

  </div>
</template>

<style lang="scss" scoped>
.progress-wrapper {
  position: relative;
  width: 10vw;
  height: 8px;
}
</style>